<template>
	<view class="search-bar">
		<uv-search :focus="focus" :bg-color="color" :search-icon-color="searchIconColor" v-model="searchInput"
			search-icon-size="24" :animation="true" @search="search" @custom="search"></uv-search>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const props = defineProps({
		query: String,
		focus: String,
		color: String,
		activated: String
	})

	let searchInput = props.query ? props.query : "";
	const searchIconColor = ref(props.activated === "true" ? "#E09AB5" : "#909399");

	function searchButtonCliked() {
		search(searchInput);
	}

	function search(query) {
		console.log("搜索'" + query + "'");
		uni.navigateTo({
			url: "/pages/moments/moments-filtered/moments-filtered?query=" + query
		})
	};
</script>

<style lang="scss">
	.search-bar {
		margin: 10px;
	}
</style>